<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
<style>
   
        .show{
            margin-top: 70px;
            width: 100%;
            height: 200px;
            background-color:#eeeeee;
        }
        .show h2{
            line-height: 200px;
            padding-left: 100px;
        }
        .nav>li{
            display: inline-block; 
            margin-left: 30px;
            color: gray;
        }
        h2.account{
            line-height: 100px;
            padding-left: 0;
        }
        .cshow{
            line-height: 50px;
        }
        .childbox{
            padding-left: 100px;
        }
</style>
</head>

<body>
<div id="box">
    <nav class="navbar navbar-default navbar-fixed-top">
        <!-- <div class="container"> -->
            <ul class="nav navbar-nav">
                <li><router-link to='/myvue'>Vue</router-link></li>
                <li><router-link to='/home'>首页</router-link></li>
                <li><router-link to='/about'>关于我们</router-link></li>
                <li class="dropdown">
                  <!-- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> -->
                  <router-link to='/accou'>账户中心 <span class="caret"></span></router-link>
                </li>
                <li><router-link to='/login'>登录</router-link></li>
              </ul>
    </nav>
    <div class="show">
        <router-view></router-view>
    </div>
  
</div>
<template id="accou">
    <div class="childbox">
        <h2 class="account">
        <router-link to='/accou/pwd'>账户中心</router-link>
    </h2>
        <div class="cshow">
            <router-view></router-view>
        </div>
    </div>

</template>
</body>

</html>
<script>
    //1.创建组件
    var Myvue={template:'<h2>Vue</h2>'}
    var Home={template:'<h2>首页</h2>'}
    var About={template:'<h2>关于我们</h2>'}
    var Accou={template:'#accou'}
    var Login={template:'<h2>登录</h2>'}
    // var Pwd={template:'<h2>管理密码</h2>'}
    //2.创建路径
    var routes=[
        {path:'/',redirect:'/myvue'},
        {path:'/myvue',component:Myvue},
        {path:'/home',component:Home},
        {path:'/about',component:About},
        {path:'/accou',component:Accou,children:[
            {path:'pwd',component:{template:'<div>管理密码</div>'}},
            // {path:'/',redirect:'pwd'}
        ]},
        {path:'/login',component:Login}
    ];
    //3.创建路由对象
    var router=new VueRouter({
        routes:routes
    })
    var vm=new Vue({
        el:"#box",
        data:{},
        //4.路由配置
        router:router
    })


</script>